<template>
<div>
  <div style="height: 35px">
      <a
        style="cursor: pointer; color: #cb2c21; font-weight: bold"
        @click="goView('/Cinziqao', {})"
        >心理科普</a
      >
      ＞
      <!-- <a
        style="cursor: pointer; color: #cb2c21; font-weight: bold"
        @click="
          goView('/LearningHome/Learning/CourseIntroduction', {
            tid: curriculumId,
          })
        "
        >{{ getScienceType() }}</a
      > -->
      {{ getScienceType() }}
    </div>
  <el-card
    class="m_t_b_10px xd-LearningHome-PoliticalNews-NewsDetail"
    shadow="hover"
  >
    <div slot="header" class="clearfix">
      <p class="new-title">
        <b v-text="decode(detail.scienceTitle)"></b>
      </p>
      <div class="text_color_999999 text_size_7 desc">
        <span>发布人：{{ detail.releaseUser }}</span>
        <span>发布日期：{{ detail.createTime }}</span>
        <!-- <span>应读{{detail.allcount || 0}}人</span>
        <span>已读{{detail.scount || 0}}人</span>
        <span>未读{{detail.wcount || 0}}人</span> -->
        <!-- <el-button
          v-if="detail.i_type === 1"
          class="receive-detail"
          plain
          @click="showReceiveDetail"
        >接收详情</el-button> -->
      </div>
    </div>
    <pre v-html="decode(detail.scienceContent)"></pre>
    <div
      class="video-panel"
      style="text-align: center; padding-top: 30px"
      v-if="detail.scienceType == 2"
    >
      <audio
        style="width: 100%"
        :src="detail.psychicScienceFileList[0].filePath"
        controls="controls"
      >
        您的浏览器不支持 audio 标签。
      </audio>
    </div>

    <div class="video-panel mp4" v-if="detail.scienceType == 3">
      <CkplayerVideo
        ref="flvVideoPlayer2"
        :videoUrl="detail.psychicScienceFileList[0].filePath"
      ></CkplayerVideo>
    </div>
  </el-card>
</div>
</template>
<script>
const CkplayerVideo = () => import("../../../components/CkplayerVideo");
export default {
  name: "NoticeDetail",
  components: {
    CkplayerVideo,
  },
  data() {
    return {
      baseUrl: utils.baseURL,
      detail: {
        v_notice_title: "",
        v_notice_content: "",
      },
      receiveDetailVisible: false,
      receiveUserList: [],
      receiveDeptList: [],
      receiveNextDeptList: [],
      receiveList: [],
      parentDept: {},
      deptHistory: [],
      showNext: false,
      selectDeptName: "", //选中的部门名称
      receiveParams: {}, //初始接收详情参数
      videoUrl: "", 
    };
  },
  watch: {
    $route: "refresh",
  },
  computed: {
    receiveListIsDeptList: function () {
      return this.receiveList.filter(function (item) {
        return item.is_dept === 1;
      });
    },
    receiveListIsDeptIsRead: function () {
      return this.receiveList.filter(function (item) {
        return item.is_dept === 1 && item.readCount === item.userCount;
      });
    },
    receiveListIsDeptNotRead: function () {
      return this.receiveList.filter(function (item) {
        return item.is_dept === 1 && item.readCount !== item.userCount;
      });
    },
    receiveListNotDeptNotRead: function () {
      return this.receiveList.filter(function (item) {
        return item.is_dept != 1 && item.readFlag != 1;
      });
    },
    receiveListNotDeptIsRead: function () {
      return this.receiveList.filter(function (item) {
        return item.is_dept != 1 && item.readFlag === 1;
      });
    },
  },
  mounted() {
    var activeMenu = this.$route.query.activeMenu || "/Cinziqao";
    this.$store.commit("updateActiveMenu", activeMenu);
    var id = this.$route.query.id;
    this.getDetail(id);
    utils.goTop();
  },
  methods: {
    registerDownnum(obj) {
      obj.downnum = parseInt(obj.downnum) + 1;
      this.$forceUpdate();
    },
    getDetail(id) {
      utils.post("/psychic/psychicScience/get", { scienceId: id }, (res) => {
        if (res.success) {
          this.detail = res.data;
          this.startStudy(id);
        }
      });
    },
    startStudy(id) {
      utils.post(
        "/psychic/psychicScience/startStudy",
        { scienceId: id },
        (res) => {
          if (res.success) {
          }
        }
      );
    },
    decode(value) {
      let result = "";
      try {
        result = decodeURI(value);
      } catch (ex) {
        console.warn(ex);
        result = value;
      }
      return result == "undefined" ? "" : result;
    },
    showReceiveDetail() {
      this.fetchReceiveDetail(this.receiveParams);
    },
    fetchReceiveDetail(params, isBack) {
      let loadingInstance = this.Loading.service({
        fullscreen: true,
        lock: true,
        text: "拼命加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.selectDeptName = params.dept_name;
      const deptids = params.dept_id || "";
      params.i_id = this.detail.i_id;
      utils.post(
        "notice/receiveDetail",
        {
          i_id: params.i_id,
          deptids: deptids,
        },
        (res) => {
          loadingInstance.close();
          this.receiveDetailVisible = true;
          if (res.success) {
            this.receiveList = res.data;
            console.log(this.receiveList);
            if (!isBack) {
              this.deptHistory.unshift(params);
            }
          }
        }
      );
    },
    dialogBack() {
      this.deptHistory.shift();
      this.fetchReceiveDetail(this.deptHistory[0], true);
    },
    refresh(item) {
      this.getDetail(item.query.id);
    },
    goView(url, query) {
      query = query || {};
      if (url) {
        this.$router.push({ path: url, query: query });
      } else {
        this.$notify.info("暂未发布，敬请期待！");
      }
    },
    getScienceType(){
      var scienceType ="";
      switch (this.detail.scienceType) {
        case "1":
          scienceType ="科普文章";
          break;
        case "2":
          scienceType ="减压音乐";
          break;
       case "3":
          scienceType ="心理影片";
          break;
        default:
          break;
      }
      return scienceType;
    },
  },
};
</script>
<style lang="less">
@primary-color: #cb2c21;
@bg-light-color: #de1632;

.xd-LearningHome-PoliticalNews-NewsDetail {
  .new-title {
    font-size: 22px;
  }
  .clearfix {
    text-align: center;
    .desc {
      span {
        margin-right: 25px;
      }
      .receive-detail {
        color: @primary-color;
        border-color: @primary-color;
        padding: 6px 12px;
        span {
          margin-right: 0;
        }
      }
    }
  }
  .dialog-back {
    color: @primary-color;
    cursor: pointer;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
    color: #ffffff;
    text-align: center;
    margin-bottom: 20px;
  }
  .bg-primary {
    background: @primary-color;
  }
  .bg-primary-light {
    background: @bg-light-color;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 30px;
    line-height: 30px;
    &.dept {
      line-height: 1;
      padding: 10px 0;
      cursor: pointer;
    }
  }
  .row-bg {
    padding: 10px 0;
    background-color: #ffffff;
  }

  .affix {
    display: block;
    text-align: center;
  }
}
</style>
